<!--出入记录-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :search.sync="timeForm"
          :permission="permissionList"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @selection-change="selectionChange">
        <template slot="direction" slot-scope="scope">
          <el-tag v-if="scope.row.direction === 1">{{ scope.label }}</el-tag>
          <el-tag v-else-if="scope.row.direction === 0">{{ scope.label }}</el-tag>
          <el-tag v-else type="info">{{ scope.label }}</el-tag>
        </template>
      </avue-crud>

    </basic-container>
  </div>
</template>

<script>
import {showStudentRecords} from '@/api/check/s-records'
import {mapGetters} from 'vuex'
import {LEAVE_DETAILS, LEAVE_SEX} from '@/const/Leave'
import {DIRECTION} from '@/const/Dict'


export default {
  name: 't-records',
  data() {
    return {
      tableData: [],
      group: [],
      searchForm: {},
      timeForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      // tableOption: tableOption,
      chooseList: [],
      tableOption: {
        border: true,  //竖线边框
        index: true,  //表格序号
        indexLabel: '序号',  //序号的标题
        stripe: true,  //是否显示表格的斑马条纹
        menuAlign: 'center',  //菜单栏对齐方式
        menu: false,
        menuWidth: 120,  //操作菜单栏的宽度
        align: 'center',  //表格列对其方式
        emptyBtnText: '重置', //清空按钮文案
        searchMenuSpan: 6,  //搜索及清空等操作按钮一栏长度
        // searchSpan: 5,  //搜索框长度
        addBtn: false,  //添加按钮
        delBtn: true,  //行内删除按钮
        editBtn: false,  //行内编辑按钮
        viewBtn: false,  //是否显示查看按钮
        // selection: true,  //表格是否显示可选
        reserveSelection: true,
        excelBtn: false,  //表格导出按钮是否显示
        refreshBtn: true,  //表格上面小的 刷新按钮
        columnBtn: false,  //表格上面小的 列表显隐按钮
        searchBtn: true,  //搜索按钮
        // menu:true,  //是否显示操作栏
        menuType: 'button',//操作栏样式为按钮
        searchLabelWidth: 85,  //搜索框前标题宽度
        labelWidth: '30%',  //行内查看弹窗的标题宽度
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: 'kid',
            prop: 'kid',
            search: false,
            hide: true,
          },
          {
            label: '人员id',
            prop: 'id',
            search: false,
            hide: true,
          },
          {
            label: '姓名',
            prop: 'name',
            search: true,
            dicData: LEAVE_DETAILS,
          }, {
            label: '性别',
            prop: 'sex',
            search: true,
            type: 'select',
            dicData: LEAVE_SEX,
            change: (value) => {
              this.searchForm.sex = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '单位',
            prop: 'deptId',
            search: true,
            filter: false,
            type: 'tree',
            hide: true,
            dicUrl: '/admin/dept/PermissionTree',
            dicFormatter: (res) => {
              let arr1 = res.data
              let value = []
              let arr = arr1.filter(item => item.isLock != true )
              let a = Math.min.apply(Math, arr.map((item, index) => {
                return item.parentId
              }))
              function transTreeData(items){
                if(items.length>0){
                  var curPid = a //pid=0，为最上层节点 ，即无父节点
                  var parent=findChild(curPid);//数组
                  return parent;
                }else{
                  return [];
                }
              }
              function findChild (curPid){
                var _arr = [];
                var items= arr;
                var length=items.length;
                for(var i = 0; i < length; i++){
                  if(items[i].parentId == curPid){
                    var _obj = items[i];
                    _obj.children = findChild(_obj.id);
                    _arr.push(_obj);
                  }
                }
                console.log(_arr)
                return _arr;
              }
              value = transTreeData(arr)
              return value
            },
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'id'
            },
            change: (value) => {
              // if (value.value === '') {
              //   return;
              // }
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },

          },
          // {
          //   label: '年级',
          //   prop: 'parentName',
          //   search: false,
          //   type: 'select',
          //   dicData: LEAVE_DETAILS,
          // },
          // {
          //   label: '年级',
          //   prop: 'deptId',
          //   search: true,
          //   type: 'select',
          //   hide: true,
          //   // searchClearable: false,
          //   defaultExpandAll: true,
          //   dicUrl: '/campus/sysdept/detpTree/1/2',
          //   cascaderItem: ['deptName'],
          //   dicFormatter: (res) => {
          //     // console.log(res.data[0].children)
          //     return res.data[0].children;//返回字典的层级结构
          //   },
          //   dicMethod: 'get',
          //   props: {
          //     label: 'name',
          //     value: 'deptId'
          //   },
          //   change: (value) => {
          //     this.searchForm.deptId = value.value
          //     this.getList(this.page, this.searchForm)
          //   },
          // },{
          //   label: '班级',
          //   prop: 'deptName',
          //   search: true,
          //   filter: false,
          //   type: 'select',
          //   // hide: true,
          //   // searchClearable: false,
          //   defaultExpandAll: true,
          //   dicUrl: '/campus/sysdept/detpTree/{{key}}/3',
          //   dicFormatter: (res) => {
          //     // console.log(res.data[0].children)
          //     return res.data[0].children;//返回字典的层级结构
          //   },
          //   dicMethod: 'get',
          //   props: {
          //     label: 'name',
          //     value: 'deptId',
          //   },
          //   change: (value) => {
          //     this.searchForm.deptId = value.value
          //     this.getList(this.page, this.searchForm)
          //   },
          // },
          {
            label: '考勤地点',
            prop: 'groupName',
            dicData: LEAVE_DETAILS,
          },
          {
            label: '考勤地点',
            prop: 'accessGroupId',
            search: true,
            type: 'select',
            hide:true,
            dicUrl: '/campus/accesscontrolgroup/selectAll',
            dicMethod: 'get',
            props: {
              label: 'groupName',
              value: 'id'
            },
            change: (value) => {
              this.searchForm.accessGroupId = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '进出口',
            prop: 'direction',
            search: true,
            type: 'select',
            dicData: DIRECTION,
            slot: true,
            change: (value) => {
              this.searchForm.direction = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '身份',
            prop: 'identityKey',
            search: true,
            type: 'select',
            dicUrl: '/campus/identity/selectAll',
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'id'
            },
            change: (value) => {
              this.searchForm.identityKey = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '体温',
            prop: 'deviceTemp',
            search: false,
            dicData: LEAVE_DETAILS,
          },
          {
            width: 150,
            label: '考勤时间',
            prop: 'created',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            search: false,
            dicData: LEAVE_DETAILS,
          },
          {
            label: '开始时间',
            prop: 'startTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            search: true,
            hide: true,
            searchClearable: false,
            searchRules: [
              {
                required: true,
                trigger: "none",
                message: '请输入开始时间'
              }
            ]
          },
          {
            label: '结束时间',
            prop: 'endTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            search: true,
            hide: true,
            searchClearable: false,
            searchRules: [
              {
                required: true,
                trigger: "none",
                message: '请输入结束时间'
              }
            ]
          },
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        delBtn: this.vaildData(this.permissions.sys_log_del, true)
      }
    },
  },
  created() {
    // 默认开始时间显示
    let startdate = this.findObject(this.tableOption.column, "startTime");
    this.Date = new Date();
    // 获取当前年
    this.year = this.Date.getFullYear();
    // 获取当前月
    this.month = this.Date.getMonth() + 1;
    // 获取当前日
    this.date = this.Date.getDate();

    // this.hh = new Date().getHours();
    // this.mm = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    // this.ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();

    //  自动补0
    this.month = (this.month < 10) ? '0' + this.month : this.month = this.month;
    this.date = (this.date < 10) ? '0' + this.date : this.date = this.date;

    // columndate.searchValue = this.year + '-' + this.month + '-' + this.date + ' ' + this.hh + ':' + this.mm + ':' + this.ss;
    startdate.searchValue = this.year + '-' + this.month + '-' + this.date + ' ' + '00' + ':' + '00' + ':' + '00';
    console.log(startdate)

    // 默认开始时间显示
    let enddate = this.findObject(this.tableOption.column, "endTime");
    this.Date = new Date();
    this.year = this.Date.getFullYear();
    this.month = this.Date.getMonth() + 1;
    this.date = this.Date.getDate();
    //  自动补0
    this.month = (this.month < 10) ? '0' + this.month : this.month = this.month;
    this.date = (this.date < 10) ? '0' + this.date : this.date = this.date;

    enddate.searchValue = this.year + '-' + this.month + '-' + this.date + ' ' + '23' + ':' + '59' + ':' + '59';
    // console.log(enddate)
  },
  watch: {
    selectionChange: (val) => {
      if (this.chooseList.length === 0) {
        this.$refs.crud.toggleSelection(val);
      }
    },
    immediate: true
  },
  methods: {

    getList(page, params, row) {
      this.tableLoading = true
      showStudentRecords(Object.assign({
        // descs: 'create_time',
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },

    // 表格的多选方法
    selectionChange(list) {
      this.chooseList = list
      // console.log(this.chooseList)
    },
    searchChange(form, done) {
      if (form.deptName !== undefined) {
        form.deptId = form.deptName
        // console.log(form.deptId)
        this.getList(this.page, form)
        done()
      }
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },
    searchReset(form) {
      this.timeForm.startTime = form.startTime
      this.timeForm.endTime = form.endTime
      this.getList(this.page, form)
    },

  }
}
</script>
<style scoped>
/deep/ .avue-crud__menu {
  display: none;
}

/deep/ .el-form-item__label {
  text-align: left;
}

/deep/ .avue-form__row {
  padding-right: 16px !important;
}

/deep/ .avue-form__menu--center {
  text-align: left;
}
/deep/.el-form-item__label:before{
  float: right;
  margin-top: 3px;
}
</style>
